<template>
  <div class="container-dataShow" >
    <div  class=" tata" v-for="(item,index) in  arr1 " :key="index">
        <div>
            <h2>{{item.num1}}</h2>
            <p>停车场总数</p>
        </div>
        <div>
            <h2>{{item.num2}}</h2>
            <p>停车位总数</p>
        </div>
        <div>
            <h2>{{item.num3}}</h2>
            <p>停车总次数</p>
        </div>
        <div>
            <h2>{{item.num4}}</h2>
            <p>停车总次数</p>
        </div>
        <div>
            <h2>{{item.num5}}</h2>
            <p>维护总次数</p>
        </div>
        <div>
            <h2>{{item.num6}}</h2>
            <p>用户总数</p>
        </div>
    </div>
  </div>
</template>

<script>
import { getInitNumApi } from "../../../api/ljjApi";
export default {
    data() {
        return {
            arr1:[]
        }
    },
    mounted() {
        this.initNum()
    },
    methods: {
        initNum(){
            getInitNumApi().then(res=>{
                if(res.code==200){
                    this.arr1=res.data
                    // console.log(this.arr1);
                    
                }

            })
        }
    },

}
</script>

<style lang="less" scoped>
div,p,span,li{
    box-sizing: border-box;
}
.container-dataShow{
    margin-bottom: 20px;
    background: rgba(255,255,255,0.4);
    .tata{
        display: flex;
        justify-content: space-between;
         div{
        width: 182px;
        height: 86px;
        border-radius: 5px;
        padding: 16px 0;
        text-align: center;
        color: #fff;
        background: url(../../../images/che1.webp) no-repeat center center;
        // background-size: 100% 100%;
        h2{
            font-size: 26px;
            margin-bottom: 12px;
        }
        &:nth-of-type(2n){
            background-image: url(../../../images/che2.webp);
        }
        &:nth-of-type(3n){
            background-image: url(../../../images/che3.webp);
        }
    }
    }
   
}

</style>